<template>
  <div>
    <van-dropdown-menu>
      <van-dropdown-item disabled title="综合"  />
      <van-dropdown-item @change="priceChange"  title="价格" v-model="priceVal" :options="option2" />
      <van-dropdown-item @change="categoryChange" title="分类" v-model="categoryVal" :options="filterCategory" />
    </van-dropdown-menu>


    <van-empty v-if="goodsList.length == 0" image="search" description="没有搜索的商品" />
    <Products v-else :goodsList="goodsList" />
  </div>
</template>

<script>

import Products from '@/components/Products'

export default {
  data () {
    return {
      priceVal: "",
      categoryVal: "",  // 这个的值是哪一项的value就表示哪一项被勾中
      option2: [
        { text: '价格由高到低', value: 'desc' },
        { text: '价格由低到高', value: 'asc' },
      ],
      
    }
  },
  beforeUpdate() {
      // 数据挂在完毕,遍历filterCategory  看那一项的checked为true,
      // 把为true的this.categoryVal改为它的value值,这样就勾选上了
      this.filterCategory.map(item => {
        // 如果item的checked为true,就改this.categoryVal
        if(item.checked) {
          this.categoryVal = item.value
          return
        }
      })
  },
  methods: {
    categoryChange(value) {
      // console.log(value); // value就是id
      this.$emit("categoryChange", value)
    },
    priceChange(value) {
      console.log(value);
      this.$emit("priceChange", value)

    }
  },
  props: ["filterCategory", "goodsList"],
  components: {
    Products
  }
}
</script>
 
<style lang = "less" scoped>
  
</style>